<template>
	<div class="icons">
	<swiper>
	   <swiper :options="swiperOption" v-if="this.pages.length">
	       <swiper-slide v-for="(page, index) of pages" :key="index">
				<div class="icon" v-for="item of page" :key="item.id">
					<img class="iconimg"  :src="item.imgUrl">
					<p>{{item.desc}}</p>
				</div>
		   </swiper-slide>
	   </swiper>
	   <div class="swiper-pagination"  slot="pagination"></div>
	</swiper>
  	</div>
</template>

<script>
export default {
    name: 'HomeIcons',
    props:{
        list:Array
    },
    data () {
    	return {
    		swiperOption:{
    			autoplay:false,
    			pagination: '.swiper-pagination',
                loop:true
    		}
    	}
    },
    computed: {
    	pages () {
    	  const pages = []
    	  this.list.forEach((item, index) => {
    	    const page = Math.floor(index / 8)
    	    if (!pages[page]) {
    	      pages[page] = []
    	    }
    	    pages[page].push(item)
    	  })
    	  return pages
    	}
  	}
}
</script>


<style lang="stylus"  scoped>
.icons >>> .swiper-container 
	height:3.9rem
	width:100%		
.icon
	width:25%
	height:1.7rem
	float:left
	text-align:center
	color:#333
	.iconimg
		width:1.1rem
		height:1.1rem
		padding:.1rem 0

  			
</style>